<template>
  <div>
    <div>
      <el-button type="" @click="handleAdd">添加</el-button>
    </div>
    <el-table
      v-loading="loading"
      empty-text="搜索未查找到结果"
      :data="tableData"
      stripe
      height="calc(100vh - 55px)"
    >
      <el-table-column type="index" label="序号" width="48" align="center"></el-table-column>
      <el-table-column show-overflow-tooltip prop="name" label="门店名称" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="typeName" label="门店类型" width="100" align="center">
      </el-table-column>

      <el-table-column prop="floor" label="楼层" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.floor }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="门店地址" width="100" align="center"></el-table-column>
      <!-- <el-table-column
        prop="createTime"
        label="创建时间"
        width="70"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="updateTime"
        label="编辑时间"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="description"
        label="门店描述"
        align="center"
      ></el-table-column>
      <el-table-column label="状态" prop="status" width="90" align="center">
        <template slot="header">
          <span>状态&nbsp;&nbsp;</span>
          <el-popover
            placement="bottom-end"
            width="80"
            trigger="hover"
            popper-class="scene-status-filter-popper"
          >
            <div
              class="filter-item"
              v-for="(val, index) in ['全部', '已启用', '已禁用']"
              :key="val + index"
            >
              <div
                class="scene-filter-span"
                :class="activeStatus === index ? 'active' : ''"
                @click="changeFilterStatus($event, index)"
              >
                {{ val }}
              </div>
            </div>
          </el-popover>
        </template>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="danger">
            {{ scope.row.status | statusFilter }}
          </el-tag>
          <el-tag v-else>
            {{ scope.row.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <span>
            <el-link :underline="false" @click="handleEdit(scope.row)" type="primary">
              编辑
            </el-link>
            <span class="ilbw5"></span>
            <el-link
              :underline="false"
              slot="reference"
              type="danger"
              @click="handleDel(scope.row)"
            >
              删除
            </el-link>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row type="flex" justify="end" style="margin-top: 12px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.current"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>

    <el-dialog
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      :title="title"
      :visible.sync="dialogFormVisible"
      width="700px"
      :close="cancel"
    >
      <el-form :model="form" ref="form" :rules="rules" label-width="90px" label-position="left">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-select
            v-model="form.typeName"
            placeholder="请选择"
            @change="changeType"
            :popper-append-to-body="false"
          >
            <el-option label="潮流服饰" value="1"></el-option>
            <el-option label="黄金珠宝" value="2"></el-option>
            <el-option label="配饰" value="3"></el-option>
            <el-option label="时尚服饰" value="4"></el-option>
            <el-option label="运动" value="5"></el-option>
            <el-option label="美妆护肤" value="6"></el-option>
            <el-option label="餐饮美食" value="7"></el-option>
            <el-option label="数码" value="8"></el-option>
            <el-option label="其他" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店位置" prop="address">
          <el-input
            v-model="form.address"
            placeholder="请输入门店位置"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="楼层" prop="floor">
          <el-select v-model="form.floor" placeholder="请选择" :popper-append-to-body="false">
            <el-option label="一楼" :value="1"></el-option>
            <el-option label="二楼" :value="2"></el-option>
            <el-option label="三楼" :value="3"></el-option>
            <el-option label="四楼" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌介绍" prop="description">
          <el-input
            v-model="form.description"
            placeholder=""
            type="textarea"
            :rows="5"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="缩略图" prop="thumb">
          <el-upload
            class="upload-demo"
            action="/api/file/upload?pathname=thumb"
            :on-success="handleThumbSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="thumbFileList"
            :accept="acceptTypes.join()"
            list-type="picture"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="详情图" prop="detailImgs">
          <el-upload
            class="upload-demo"
            action="/api/file/upload?pathname=detailImgs"
            :on-success="handleDetailImgsSuccess"
            :on-remove="handleDetailImgsRemove"
            :file-list="detailFileList"
            :accept="acceptTypes.join()"
            list-type="picture"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="type === 'edit'" type="primary" @click="updateForm('form')"
          >修 改</el-button
        >
        <el-button v-else type="primary" @click="sumbitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStoreById, pageQueryStore, addStore, updateStore, deleteStore } from '@/api/store';
import { clearValue } from '@/utils/tools';
export default {
  data() {
    return {
      dialogFormVisible: false,
      loading: false,
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 20,
      listQuery: {
        current: 1,
        size: 20,
      },
      activeStatus: 0,
      form: {
        id: '',
        type: '',
        thumb: '',
        name: '',
        address: '',
        floor: '',
        description: '',
        detail_imgs: '',
        status: 1,
      },

      thumbFileList: [],
      detailFileList: [],
      rules: {
        name: [
          {
            required: 'true',
            message: '名称不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        type: [
          {
            required: 'true',
            message: '类型不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        address: [
          {
            required: 'true',
            message: '门店位置不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        floor: [
          {
            required: 'true',
            message: '楼层不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        description: [
          {
            required: 'true',
            message: '品牌介绍不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        thumb: [
          {
            required: 'true',
            message: '缩略图不能为空',
            trigger: ['change', 'blur'],
          },
        ],
        detailImgs: [
          {
            required: 'true',
            message: '详情图不能为空',
            trigger: ['change', 'blur'],
          },
        ],
      },
      type: '',
      acceptTypes: ['.jpeg', '.jpg', '.png'],
    };
  },
  computed: {
    title() {
      return this.type === 'edit' ? '编辑' : '新增';
    },
  },
  mounted() {
    this.page();
  },
  methods: {
    page() {
      pageQueryStore(this.listQuery).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.page();
    },
    changeType() {},
    cancel() {
      this.dialogFormVisible = false;
    },
    handleAdd() {
      this.type = 'add';
      this.dialogFormVisible = true;
      this.clearValue();
      this.thumbFileList = [];
      this.detailFileList = [];
    },
    handleEdit(row) {
      this.clearValue();
      this.type = 'edit';
      this.dialogFormVisible = true;
      this.form = row;
      if (row.thumb) {
        this.thumbFileList = [
          {
            name: '缩略图.png',
            url: row.thumb,
          },
        ];
      } else {
        this.thumbFileList = [];
      }
      if (row.detailImgs) {
        this.detailFileList = [
          {
            name: '详情图.png',
            url: row.detailImgs,
          },
        ];
      } else {
        this.detailFileList = [];
      }
    },
    handleDel(row) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          console.log(row);
          deleteStore(row.id).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
            this.page();
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    sumbitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addStore(this.form).then((res) => {
            console.log(res);
            this.$message({
              message: '添加成功',
              type: 'success',
            });
            this.dialogFormVisible = false;
            this.page();
          });
        }
      });
    },
    updateForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateStore(this.form).then((res) => {
            console.log(res);
            this.$message({
              message: '添加成功',
              type: 'success',
            });
            this.dialogFormVisible = false;
            this.page();
          });
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.form.thumb = '';
    },
    handlePreview(file) {
      console.log(file);
    },
    handleThumbSuccess(res) {
      if (res.code === 2000) {
        this.$message.success('上传成功');
        this.form.thumb = res.data;
      }
    },
    handleDetailImgsSuccess(res) {
      if (res.code === 2000) {
        this.$message.success('上传成功');
        this.form.detailImgs = res.data;
      }
    },
    handleDetailImgsRemove(file, fileList) {
      console.log(file, fileList);
      this.form.detailImgs = '';
    },
    clearValue() {
      this.form = {
        id: '',
        type: '',
        thumb: '',
        name: '',
        address: '',
        floor: '',
        description: '',
        detail_imgs: '',
        status: 1,
      };
    },
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '已禁用',
        1: '已启用',
      };
      return statusMap[status];
    },
  },
};
</script>

<style>
.ilbw5 {
  margin-left: 5px;
}
</style>
